<script lang="ts" setup>
import {defineComponent, onMounted, reactive, ref} from "vue";
import * as loanAPI from "../../api/loan";
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
const comp = defineComponent({
  Delete: Delete,
  Edit: Edit
})

const value = ref('')
const options = [
  {
    value: 'loan_monthly_information',
    label: '月供贷款',
  },
  {
    value: 'loan_information',
    label: '全款贷款',
  },
]
const pageData = reactive({
  list: [],
  pageParams: {
    pageSize: 5,
    pageLocal: 1
  },
  total: 10
})
const pageSettings = reactive({
  pageSize: 5,
  pageLocal: 1
})
const pageDisabled = ref(false)
const getLoanList =async()=>{
  pageDisabled.value = true
  try {
    const data = await loanAPI.getLoanList(pageSettings)
    pageData.total = data.total
    pageData.list = data.list as any
  }catch (e) {
    console.log(e)
    return
  }finally {
    pageDisabled.value = false
  }
}
onMounted(async () => {
  await getLoanList()
})

function deleteLoan (index:number){
  alert(pageData.list[index]['loanId'])
}
function cancelEvent(){
  alert('a')
}

</script>

<template>
  <div class="main-container">
    <div class="main-main">
      <el-table :data="pageData.list" stripe border>
        <el-table-column type="index" label="索引" min-width="30px"/>
        <el-table-column label="loan" prop="loanId"/>
        <el-table-column label="公司名称" prop="loanCompany"/>
        <el-table-column label="期限" prop="loanDate"/>
        <el-table-column label="描述" prop="loanDescription"/>
        <el-table-column label="利率" prop="loanInterestRate"/>
        <el-table-column label="名称" prop="loanName"/>
        <el-table-column label="操作">
          <template #header>
            <el-select v-model="value" placeholder="全款贷款">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </template>
          <template #default="scope">
          <el-button type="primary" :icon="comp.Edit" @click="deleteLoan(scope.$index)" circle />
            <el-popconfirm
                confirm-button-text="Yes"
                cancel-button-text="No"
                :icon="comp.Delete"
                icon-color="#626AEF"
                title="Are you sure to delete this?"
                @confirm="deleteLoan(scope.$index)"
                @cancel="cancelEvent"

            >
              <template #reference>
                <el-button type="danger" :icon="comp.Delete" circle />

              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main-footer">
      <el-pagination
          v-model:current-page="pageData.pageParams.pageLocal"
          v-model:page-size="pageData.pageParams.pageSize"
          :page-sizes="[1, 2, 3, 4, 5]"
          :total="pageData.total"
          :pager-count="5"
          :disabled="pageDisabled"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @update:current-page="getLoanList"
          @update:page-size="getLoanList"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
.main-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px 20px 0;
}

.main-header {
  height: 60px;
}

.main-main {
  position: relative;
  flex: 1;
  height: 0;

  .introduction {
    h3 {
      font-size: 20px;
    }

    p {
      text-indent: 2em;
      font-size: 18px;
    }
  }
}

.main-footer {
  margin-top: 20px;
  margin-bottom: 10px;
  .el-pagination {
    justify-content: center;
    height: 100%;
  }
}
</style>